import React,{ Component } from 'react';
import './welcomeLag.scss';
import '../index/index.scss';
import { Switch, message } from 'antd';
import { editAutoReply, editAutoReplySwitch } from 'api/user.js';
export default class WelcomeLag extends Component{
	constructor (props) {
		super(props)
		this.state={
			hiden: props.location.state.auto_reply_status === 1 ?  '' : 'hiden',
			switch: props.location.state.auto_reply_status === 1 ?  'switch' : '',
			value: props.location.state.auto_reply,
			sum: 0,
			switchState: props.location.state.auto_reply_status === 1 ? true : false,
			auto_reply_status: props.location.state.auto_reply_status
		}
	}
	goBack () { //返回上一级
		this.props.history.goBack()
	}
	onChange (checked) {
		this.setState({
			hiden: `${checked}` === 'true' ? '' : 'hiden',
			switch: `${checked}` === 'false' ? '' : 'switch',
			auto_reply_status: `${checked}` === 'true' ? 1 : 0
		},()=>{
			editAutoReplySwitch({
				auto_reply_status: this.state.auto_reply_status
			})
		})
		
	}
	_editAutoReply () {//编辑欢迎语
		editAutoReply({
			auto_reply: this.state.value
		}).then(res => {
			if(res.code === 1){
				message.success('欢迎语修改成功！', 3, this.props.history.push(`${window.baseUrl}/user`))
			} else {
				message.error(res.message, 3)
			}
		})
	}
	handleChange (e) { //限制字数
		if(this.state.value.length < 100){
			let value1=e.target.value.slice(0,100);
			this.setState({
				value:value1
			},()=>{
				this.setState({
					sum:this.state.value.length
				})
			})
		} else{
			console.log('22')
			let value1=e.target.value.slice(0,100);
			this.setState({
				value: value1
			},()=>{
				this.setState({
					sum:this.state.value.length
				})
			})
		}
	}
	componentDidMount(){
		document.title = '欢迎语设置';
		this.setState({
			sum:this.state.value.length
		})
	}
	render(){
		return(
			<div className="welcomeLag">
				{/*<div className="title">
					<div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
					<div>欢迎语设置</div>
					<div></div>
				</div>*/}
				<div className="perfectCard_header">
					<div>
						<img src="/webEmployee/static/images/Hi@2x.png" className="perfectCard_header_img"/><span>欢迎语设置</span>
					</div>
					<div>
						<Switch defaultChecked onChange={this.onChange.bind(this)} defaultChecked={this.state.switchState} className={this.state.switch}/>
					</div>
				</div>
				<div className={`perfectCard_content ${this.state.hiden}`}>
					<div className="perfectCard_content_text"><textarea className="perfectCard_textArea" onChange={this.handleChange.bind(this)} value={this.state.value}/></div>
					<span className="perfectCard_sum_id">{this.state.sum}/100</span>
					<div className="perfectCard_button" onClick={this._editAutoReply.bind(this)}>保存</div>
				</div>
			</div>
		)
	}
}